@import "@/common/styles/colors"

.header-main
  margin-top: 3rem
  display: flex
  align-items: center
  justify-content: space-between
  color: $white

.header-right
  display: flex

.header-right svg
  margin-left: 15px

.header-main *
  font-size: 24pt

.header-left
  margin-left: 10%
  display: flex
  gap: 0.5rem
  align-items: center
  justify-content: center
  overflow: hidden
  text-overflow: ellipsis

.demo-info
  display: flex
  cursor: pointer
  align-items: center
  justify-content: center
  font-size: 14pt
  background-color: $dark-gray
  color: $green
  margin: 0

.header-main h2
  padding: 0.5rem 1rem
  border-radius: 1rem
  margin: 0

.header-main .h2-click
  display: flex
  gap: 1rem
  align-items: center
  cursor: pointer
  user-select: none

  svg
    margin-right: 0.3rem

.header-main .h2-click:hover
  color: $green
  background-color: $dark-gray

.header-right
  margin-right: 10%

.header-icon
  cursor: pointer
  display: flex

  transition: all 50ms ease-in-out
  width: 30px
  height: 30px

.header-icon:hover
  transform: scale(1.1)
  color: $green

.test-running
  animation: pulse 2s infinite
  border-radius: 150px
  color: $green

.update-icon
  animation: pulse-update 2s infinite
  border-radius: 150px

.update-icon:hover
  color: $orange
  filter: brightness(1.2)

@keyframes pulse-update
  0%
    box-shadow: 0 0 0 0 $orange
  70%
    box-shadow: 0 0 0 10px #CCA92C00
  100%
    box-shadow: 0 0 0 0 #CCA92C00

@media screen and (max-width: 650px)
  .header-left
    flex-direction: column

@media (max-width: 530px)
  .header-main
    justify-content: center
  .header-left div
    margin-right: 0
  .header-left .h2-click
    margin-left: 0
    font-size: 22pt
  .header-icon
    width: 25px
    height: 25px

@media (max-width: 480px)
  .header-left .h2-click
    font-size: 14pt
    text-overflow: ellipsis
    overflow: hidden
  .header-left svg
    font-size: 14pt
  .header-icon
    width: 20px
    height: 20px

@media screen and (max-width: 365px)
  .header-main .h2-click
    gap: 0
  .header-left svg
    margin-right: 0
  .demo-info
    font-size: 12pt
    padding: 0